<#assign pageTitle="我的会员"/>
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/static/h5/css/user.css?20220210"/>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/vip.css" />
</#assign>
<#assign pageContent>
    <van-nav-bar
            title="会员中心"
            left-text="返回"
            left-arrow
            @click-left="location.href='/user/index.html';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="vip-intro-banner">
        <div class="bg-gray"></div>
        <h1><p>开通VIP</p>畅享海量素材下载</h1>
    </div>
    <ul class="vip-info-lists mt-12">
        <#if memberTypeList?? && memberTypeList?size gt 0>
            <#list memberTypeList as item>
                    <li data-id="${item.id}" <#if item_index == 0>class="recommend-item active"</#if> >
                        <p class="vip-item_price"><span>${item.title}</span></p>
                        <p class="vip-item_intro">
                            状态：
                            <#if item.endDate??>
                                <#if (item.endDate?long gt (.now?long+604800000))>
                                    已开通
                                <#elseif (item.endDate?long lt .now?long)>
                                    已过期
                                <#else>
                                   即将到期
                                </#if>
                            <#else>
                                未开通
                            </#if>
                        </p>
                        <div class="vip-item_line"></div>
                        <div class="vip-item_desc">网站内所属该会员权限素材免费下载</div>
                    </li>
            </#list>
        </#if>
    </ul>
    <div class="h-60"></div>
    <div class="view-content-footer">
        <van-button round color="linear-gradient(to right, #fcb338, #ff6e29)" class="btn-buy" @click="doBuyVip()">开通会员</van-button>
    </div>
    <van-popup
            v-model="vipPopup"
            closeable
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '550px' }"
    >
        <iframe src="/order/member.html" width="100%" height="100%"></iframe>
    </van-popup>
</#assign>
<#assign pageScript>
    <script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/static/libs/layer/layer.js"></script>
    <script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
    <script>
        var userId = ${user.userId};

        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: false,
                    activeTab: 0,
                    vipPopup: false,
                    active: 0
                }
            },
            methods: {
                doBuyVip() {
                    if (userId <= 0) {
                        return this.toLogin();
                    }
                    this.vipPopup = true;
                },
                toLogin() {
                    this.$toast({
                        message: '正在跳转登录中，请稍后...',
                        duration: 1000,
                        onClose: function () {
                            window.location.href = '/auth/login.html';
                        }
                    });
                }
            }
        });
    </script>
</#assign>
<#include "../layout_h5.ftl" />


